import 'package:flutter/material.dart';


class NavigationIconView {

  NavigationIconView({
    Widget icon,
    Widget change_icon,
    String title,
    Color color,

  }):   _icon = icon,
        _change_icon=change_icon,
        _title=title,
        _color=color,
        item = new BottomNavigationBarItem(
          icon: icon,
          activeIcon: change_icon,
          title: Text(title),
          backgroundColor: color,
        );

  final Widget _icon;
  final Widget _change_icon;
  final String _title;
  final Color _color;
  final BottomNavigationBarItem item;

}

class _HomeScreenState extends State<HomeScreen> {

  int _currentIndex =0;//当前选中下标
  BottomNavigationBarType _type = BottomNavigationBarType.fixed;//底部按钮宽度固定
  List<NavigationIconView> _navigationiconViews;

  @override
  void initState() {
    super.initState();
    //初始化按钮状态
    _navigationiconViews = <NavigationIconView>[
      NavigationIconView(
        icon: const Icon(Icons.access_alarm),
          change_icon: const Icon(Icons.dashboard),
          title: '微信',
        color: Colors.white
      ),
      NavigationIconView(
          icon: const Icon(Icons.eject),
          change_icon: const Icon(Icons.edit_location),
          title: '通讯录',
          color: Colors.white
      ),
      NavigationIconView(
          icon: const Icon(Icons.edit),
          change_icon: const Icon(Icons.fast_forward),
          title: '发现',
          color: Colors.white
      ),
      NavigationIconView(
          icon: const Icon(Icons.face),
          change_icon: const Icon(Icons.data_usage),
          title: '我',
          color: Colors.white
      ),
    ];

  }

  @override
  Widget build(BuildContext context) {
    // 绘制底部栏
    final BottomNavigationBar botNavBar = BottomNavigationBar(
        items: _navigationiconViews
            .map<BottomNavigationBarItem>((NavigationIconView navigationView) => navigationView.item)
            .toList(),

        currentIndex: _currentIndex,
        type: _type,
      onTap: (int index){
          setState(() {
            print('点击了第$index 个图标');
          });

      }
    );

    return new Scaffold(
      appBar: AppBar(
        title: const Text('微信'),

      ),
      body: Center(
          child: Text('目前在第$_currentIndex页'),
      ),
      bottomNavigationBar: botNavBar,
    );
  }

}

class HomeScreen extends StatefulWidget {

  HomeScreen({Key key,}) : super(key: key);

  @override
  _HomeScreenState createState() {
    return new _HomeScreenState();
  }

}